<template>
	<view class="page">
		<view class="my-top">
			<!-- head -->
			<view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
				<view class="portrait">
					<image v-show="scrollTop>20" :src="dataInfo.headimg||'/static/logo.png'"></image>
				</view>
				<view class="title">
					<text v-show="scrollTop>20">我的</text>
				</view>
				<view class="setting-mess">
					<!-- <view class="setting" @click="onServer('/pages/Setting/Settings')">
						<text class="iconfont icon-setting" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
					<view class="mess" @click="onServer('/pages/Message/Message')">
						<text class="iconfont icon-xiaoxi" :style="scrollTop>20?'color:#333333':''"></text>
					</view> -->
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="user-info" v-if="tui.isLogin()">
				<view class="portrait">
					<image :src="dataInfo.headimg"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{dataInfo.nickname}} ( {{dataInfo.group_name}} )</text>
					</view>
					<view class="rank">
						<image src="/static/rank.png"></image>
						<text>v{{dataInfo.vip_code}}</text>
					</view>
				</view>
			</view>
			<view class="user-info" @click="onUserInfo" v-if="!tui.isLogin()">
				<view class="portrait">
					<image src="/static/logo.png"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>登录/注册</text>
					</view>
				</view>
			</view>
			<!-- 关注区 -->
			<view class="focus-area">
				<view class="list" @click="onServer('/pages/Setting/Setting')">
					<view class="num">
						<image src="/static/gengxinzl.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="title">
						<text>更新资料</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/SignIn/SignIn')">
					<view class="num">
						<image src="/static/qiandao.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="title">
						<text>积分签到</text>
					</view>
				</view>
				<view class="list" @click="isRule = true">
					<view class="num">
						<image src="/static/tihuoma.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="title">
						<text>提货码</text>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=1')">
				<view class="icon">
					<text class="iconfont icon-daifukuan"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待付款</text>
				</view>
			</view>
			<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=2')">
				<view class="icon">
					<text class="iconfont icon-daifahuo"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待配送</text>
				</view>
			</view>
			<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=3')">
				<view class="icon">
					<text class="iconfont icon-daishouhuo"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待提货</text>
				</view>
			</view>
			<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=4')">
				<view class="icon">
					<text class="iconfont icon-tuikuan"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>已完成</text>
				</view>
			</view>
			<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=5')">
				<view class="icon">
					<text class="iconfont icon-daipingjia"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>售后服务</text>
				</view>
			</view>
			
		</view>
		
		<!-- 我的服务 -->
		<view class="my-service">
			<view class="title">
				<text>我的服务</text>
			</view>
			<view class="service-list">
				<view class="list" @click="onServer('/pages/bank/bank_list')">
					<view class="thumb">
						<image src="/static/bank.png"></image>
					</view>
					<view class="name">
						<text>积分商城</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/MyCoupon/MyCoupon')">
					<view class="thumb">
						<image src="/static/youhuiquan.png"></image>
					</view>
					<view class="name">
						<text>优惠券</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/huiyuan/huiyuan')">
					<view class="thumb">
						<image src="/static/quanyi.png"></image>
					</view>
					<view class="name">
						<text>礼品兑换</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/tuanzhang/shenqing')" v-if="dataInfo.is_community==2">
					<view class="thumb">
						<image src="/static/team.png"></image>
					</view>
					<view class="name">
						<text>申请团长</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/tuanzhang/teamCenter')" v-if="dataInfo.is_community==1">
					<view class="thumb">
						<image src="/static/team.png"></image>
					</view>
					<view class="name">
						<text>团长中心</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/share/share')">
					<view class="thumb">
						<image src="/static/share.png"></image>
					</view>
					<view class="name">
						<text>常见帮助</text>
					</view>
				</view>
				<view class="list" @click="onServer('serve')" style="position: relative;">
					<view class="thumb">
						<image src="/static/kfrx.png"></image>
					</view>
					<view class="name">
						<text>客服热线</text>
					</view>
					<button v-if="isLogin" open-type="contact" style="position: absolute;background: transparent;width: 100%;height: 100%;left: 0;top: 0">
						
					</button>
				</view>
			</view>
		</view>
		<!-- 为你推荐 -->
		<view class="recommend-info">
			<view class="recommend-title">
				<view class="title">
					<image src="/static/wntj_title.png" mode=""></image>
				</view>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in goodsList"
					@click="onServer('/pages/GoodsDetails/GoodsDetails?id='+item.code)" :key="index">
					<view class="pictrue">
						<image :src="item.cover" mode="heightFix"></image>
					</view>
					<view class="title-tag">
						<view class="tag">
							<text v-if="item.is_goods === 1">特价</text>
							{{item.name}}
						</view>
					</view>
					<view class="price-info">
						<view class="user-price">
							<text class="min">￥</text>
							<text class="max">{{item.price_selling}}</text>
						</view>
						<!-- <view class="vip-price">
							<image src="/static/vip_ico.png"></image>
							<text>￥{{item.vip_price||0}}</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 客服热线 -->
		<view class="serve-hotline" @click="isHotline = false">
			<view class="cu-modal bottom-modal" :class="{'show':isHotline}">
				<view class="cu-dialog">
					<view class="contact-list">
						<view class="list">
							<text>呼叫客服</text>
						</view>
						<view class="list" @click="telClick(dataInfo.kf_phone)">
							<text style="color: #959595;">{{dataInfo.kf_phone}}</text>
						</view>
						<view class="list">
							<text>取消</text>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
				<view class="cu-dialog" style="width: 630rpx;">
					<view class="cu-bar bg-white justify-end">
						<view class="content">您的提货码为</view>
						<view class="action">
							<text class="cuIcon-close text-red" @click="isRule = false"></text>
						</view>
					</view>
					<view class="rule-content">
						<image src="/static/code.png" mode="" style="width: 300rpx;height: 300rpx;margin: 0 auto;display: block;"></image>
						<view class="" style="color:#999;text-align: center;margin: 20rpx 0;">
							提货时请出示提货二维码
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-login :show="show"  @close="guanbi"></tui-login>
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				scrollTop: 0,
				isHotline: false,
				dataInfo: '',
				goodsList: [],
				page: 1,
				isRule:false,
				show:false,
				isLogin:false
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			let that = this
			this.page = 1
			this.goodsList = []
			this.getList()
			that.isLogin = this.tui.isLogin()
			
			uni.$off('isShow');
			uni.$off('isLogin');
			uni.$on('isShow', function(data) {
				that.show = true
			});
			uni.$on('isLogin', function(data) {
				that.getdata()
				that.isLogin = this.tui.isLogin()
			});
			if(that.isLogin){
				that.getdata()
			}
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		onUnload() {
			/** 这里只保留最新的15条会话记录，以保证初次加载性能 */
			uni.$off('isShow');
			uni.$off('isLogin');
		},
		methods: {
			guanbi(){
				this.show = false
			},
			getdata() {
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.dataInfo = res.data
					}
				}).catch((res) => {

				})
			},
			telClick(e) {
				uni.makePhoneCall({
					phoneNumber: e //仅为示例
				});
			},
			getList() {
				let that = this
				that.tui.request("api.data/goods", "POST", {
					page: that.page,
					category_id: 0
				}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.goodsList = that.goodsList.concat(res.data.list)

					}
				}).catch((res) => {

				})
			},
			
			/**
			 * 订单
			 */
			
			/**
			 * 钱包跳转点击
			 */
			
			/**
			 * 我的服务点击
			 */
			onServer(type) {
				if(this.tui.isLogin()){
					if (type == 'serve') {
						// this.isHotline = true;
					} else {
						this.tui.href(type)
					}
				}else{
					this.tui.wetLogin()
				}
			},
		
			/**
			 * 用户信息点击
			 * @param {Number} type
			 */
			onUserInfo() {
				this.tui.wetLogin()
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'my.scss';
	.rule-win{
		.rule-content{background: #fff;
			padding: 20rpx 4%;
			text-align: left;
			text{
				font-size: 26rpx;
				color: #555555;
				text-align: left;
				line-height: 50rpx;
			}
		}
	}
</style>